<template>
  <div id='TerrainContainer'></div>
</template>

<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addTimeIntervalCollectionProperty(this.viewer)
  },
  methods: {
    initCesium() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZGViNmIwOS0zOWY3LTQ0ZTYtYjg5Yi1jNDEyYzAzZmY1ZmUiLCJpZCI6MTE2OTA2LCJpYXQiOjE2Njk5NjE5NTB9.nN-KM-HnA5STxtweph2Rly5Y9O7bqX1khZKYQlcevHw';

      this.viewer = new Cesium.Viewer('TerrainContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: true,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        terrainProvider: new Cesium.CesiumTerrainProvider({//地质开挖必须是cesium提供的地形
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,//顶点法线效果
          requestWaterMask: true//水效果
        })
      })
      //地质开挖不能有深度测试，有深度测试会被遮盖
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addTimeIntervalCollectionProperty(viewer) {
      //创建一个动态变化的盒子
      const start = Cesium.JulianDate.fromIso8601("2019-01-01T00:00:00.00Z");
      const stop = Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z');
      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = stop.clone();
      viewer.clock.currentTime = start.clone();
      viewer.timeline.zoomTo(start, stop);
      // Speed up the playback speed 50x.
      viewer.clock.multiplier = 10000;
      // Start playing the scene.
      viewer.clock.shouldAnimate = true;
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

      var property = new Cesium.TimeIntervalCollectionProperty(Cesium.Cartesian3);
      property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
        iso8601 : '2019-01-01T00:00:00.00Z/2019-01-01T12:00:00.00Z',
        isStartIncluded : true,
        isStopIncluded : false,
        data : new Cesium.Cartesian3(400000.0, 300000.0, 200000.0)
      }));
      property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
        iso8601 : '2019-01-01T12:00:01.00Z/2019-01-02T00:00:00.00Z',
        isStartIncluded : true,
        isStopIncluded : false,
        data : new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
      }));
      property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
        iso8601 : '2019-01-02T00:00:01.00Z/2019-01-02T12:00:00.00Z',
        isStartIncluded : true,
        isStopIncluded : false,
        data : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)
      }));
      property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
        iso8601 : '2019-01-02T12:00:01.00Z/2019-01-03T00:00:00.00Z',
        isStartIncluded : true,
        isStopIncluded : true,
        data : new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
      }));

      let entity = viewer.entities.add({
        name: "Blue box",
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
        box: {
          dimensions: property,//尺寸，长宽高，随着时间动态取样变化
          material: Cesium.Color.BLUE,//材质
          fill:true,//是否填充
          shadows: Cesium.ShadowMode.ENABLED//开启接收并且投射阴影
        }
      });

      viewer.trackedEntity = entity;
    }
  }
}
</script>
<style scoped>
#TerrainContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
